import React, { useEffect, memo, useState, useRef, useMemo } from "react";
import styled from "styled-components";
import style from '@/assets/global-style';
import { debounce } from '@/api/utils';

const SearchBoxWrapper = styled.div`
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 0 0.3rem;
    padding-right: 1rem;
    height: 2rem;
    background: ${style["theme-color"]};
    .icon-back {
        font-size: 1.2rem;
        color: ${style["font-color-light"]};
    }
    .box {
        flex: 1;
        margin: 0 0.25rem;
        line-height: 0.9rem;
        background: ${style["theme-color"]};
        color: ${style["highlight-background-color"]};
        font-size: ${style["font-size-m"]};
        outline: none;
        border: none;
        border-bottom: 1px solid ${style["border-color"]};
        &::placeholder {
            color: ${style["font-color-light"]};
        }
    }
    .icon-delete {
        font-size: 16px;
        color: ${style["background-color"]};
    }
`
const SearchBox = (props) => {
    // 解构父组件props 分两部分
    // 读 props
    // 方法
    const { newQuery } = props;
    const { handleQuery, back } = props;
    const [query, setQuery] = useState('');
    const queryRef = useRef();
    // 父组件传过来的函数封装一下
    // 优化再升级
    // useMemo 可以缓存上一次函数计算的结果
    let handleQueryDebounce = useMemo(() => {
        return debounce(handleQuery, 500)
    }, [handleQuery])

    // mount 挂载后
    useEffect(() => {
        // console.log(queryRef)
        queryRef.current.focus()
    }, [])
    // 当query数据更新，使用useEffect去更新
    useEffect(() => {
        // query 更新
        handleQueryDebounce(query)
        // console.log(query)
    }, [query])
    useEffect(() => {
        // mount 时候 执行 父组件 newQuery -> input query
        let curQuery = query;
        if (newQuery !== query) {
            curQuery = newQuery;
            queryRef.current.value = newQuery;
        }
        setQuery(curQuery)
        // newQuery 更新时执行
    }, [newQuery])
    const clearQuery = () => {
        setQuery('')
    }
    const handleChange = (e) => {
        let val = e.currentTarget.value
        // console.log(val)
        setQuery(val)
    }
    const displayStyle = query ? { display: 'block' } : { display: 'none' }

    return (
        <SearchBoxWrapper>
            <i className="iconfont icon-back" onClick={() => back()}>&#xe655;</i>
            <input type="text" className="box"
                placeholder="搜索歌曲、歌手、专辑"
                ref={queryRef}
                onChange={handleChange}
            />
            <i
                className="iconfont icon-delete"
                style={displayStyle}
                onClick={clearQuery}
            >&#xe600;</i>
        </SearchBoxWrapper>
    )
}

export default memo(SearchBox)
